<!DOCTYPE html>
<html>
<head lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>我的收藏</title>
    <link rel="shortcut icon" href="__STATIC__/home/index/picture/2.png" type="image/x-icon">
    <link rel="stylesheet" href="__STATIC__/home/center/css/jquery.mobile-1.4.3.min.css" />
    <link rel="stylesheet" href="__STATIC__/home/center/css/mall.css" type="text/css" />
    <link rel="stylesheet" href="__STATIC__/home/js/layui/css/layui.css">
    <!--<link href='__STATIC__/home/js/bootstrap/css/bootstrap.css' media='screen' rel='stylesheet' type='text/css'/>-->
</head>

<body class="body_color">
<div class="mall_main">
    <div id="child_header">
        <div class="goback"><a href="javascript:history.back(-1)"><i></i></a></div>
        <div class="current_location"><span>我的收藏</span></div>
    </div>
<div id="container">
	<div data-role="page">
		<div data-role="content">
			<ul data-role="listview" class="swipe-delete">
                {volist name="row" id="v"}
				<li>
					<div class="behind" style="width: 30%">
						<a href="javascript:;" data-id="{$v.collect_id}" class="ui-btn delete-btn" style="background-color: #00c0ef">
                            <button class="layui-btn layui-btn-danger"><i class="layui-icon" style="color: red;font-size: 2em"></i></button>
                        </a>
					</div>
					<a href="javascript:;" style="position: static">
                        <div class="collect_goods">

                            <div class="coll_goods_img"><img src="{$v.courses_photo}"></div>
                            <p>{$v.courses_name}</p>
                            <span class="span_price">{$v.courses_title}</span>
                            <span class="span_stock">{$v.courses_time|date="Y-m-d",###}</span>
                        </div>
					</a>
				</li>
                {/volist}
			</ul>
		</div>
	</div>
</div>
</div>
<script type="text/javascript" src="__STATIC__/home/center/js/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="__STATIC__/home/center/js/jquery.mobile-1.4.3.min.js"></script>
<script src="__STATIC__/home/js/layui/layui.js"></script>
<script type="text/javascript">

    //课程详情
    $(".coll_goods_img").click(function () {
        var link = $(this);
        var data_id = link.attr("data-id");
        window.location.href="{:url('home/details/index')}?id="+data_id;
    })


$(function() {
    function prevent_default(e) {
        e.preventDefault();
    }

    function disable_scroll() {
        $(document).on('touchmove', prevent_default);
    }

    function enable_scroll() {
        $(document).unbind('touchmove', prevent_default)
    }

    var x;
    $('.swipe-delete li > a')
        .on('touchstart', function(e) {
            console.log(e.originalEvent.pageX)
            $('.swipe-delete li > a').css('left', '0px') // close em all
            $(e.currentTarget).addClass('open')
            x = e.originalEvent.targetTouches[0].pageX // anchor point
        })
        .on('touchmove', function(e) {
            var change = e.originalEvent.targetTouches[0].pageX - x
            change = Math.min(Math.max(-60, change), 0) // restrict to -60px left, 0px right
            e.currentTarget.style.left = change + 'px'
            if (change < -10) disable_scroll() // disable scroll once we hit 10px horizontal slide
        })
        .on('touchend', function(e) {
            var left = parseInt(e.currentTarget.style.left)
            var new_left;
            if (left < -35) {
                new_left = '-60px'
            } else if (left > 35) {
                new_left = '60px'
            } else {
                new_left = '0px'
            }
            // e.currentTarget.style.left = new_left
            $(e.currentTarget).animate({left: new_left}, 200)
            enable_scroll()
        });

    $('li .delete-btn').click(function(e) {
//        e.preventDefault();

        var link = $(this);
        var data_id = link.attr("data-id");

        $.get("{:url('home/center/collecDel')}?id="+data_id,function (data) {

            if(data > 0){

                link.parents('li').slideUp('fast', function() {
                    link.remove()
                })

            }else{
                layer.tips('删除失败', $(this), {
                    tips: [4, '#3595CC'],
                    time: 2000
                });
            }
        })
    })
});
</script>

</body>
</html>
